<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"
	xmlns:dt="http://github.com/dandelion/datatables"
	xmlns:sec="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>New Use Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Dhrubo" />

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" />

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->

</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<button type="button" class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="brand" href="#" style="color: yellow; font-weight: bold">Req1</a>
				<div class="nav-collapse collapse">

					<ul class="nav">
						<li class="active"><a href="#">Home</a></li>
						
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Use Cases <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newusecase">New</a></li>
								<li><a href="listusecases">View All</a></li>

							</ul></li>
							
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Projects <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="listprojects">View All</a></li>

							</ul></li>	


						<li class="dropdown pull-right" sec:authorize="hasRole('ROLE_COMPANY_ADMIN')">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Users <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="listusers">View All</a></li>

							</ul></li>
							
					
						<li class="dropdown pull-right" >
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tickets <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="viewallprojects">View All</a></li>

							</ul></li>		
						
						<li><a href="#about">Help</a></li>
						<li><a href="#contact">Contact</a></li>
						

					</ul>


					<div class="pull-right">
						<ul class="nav pull-right">
							<li class="dropdown"><a href="#" class="dropdown-toggle" th:text="'Hi! ' + ${#authentication.name}"
								data-toggle="dropdown">Welcome, User <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a href="/user/preferences"><i class="icon-cog"></i>
											Preferences</a></li>
									<li><a href="/help/support"><i class="icon-envelope"></i>
											Contact Support</a></li>
									<li class="divider"></li>
									<li><a href="/auth/logout"><i class="icon-off"></i>
											Logout</a></li>
								</ul></li>
						</ul>
					</div>




				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row-fluid">

			<div class="span12">

				<form action="authentication" th:action="@{/saveusecase}"
					 th:object="${useCase}" method="post">
					<h3>New Use Case</h3>

					<div class="alert alert-success" th:if="${useCase.id !=null}">
						<strong>Well done!</strong> Use case saved successfully. <br />
						Click on the 'Edit' button and start working on the use case.
					</div>


					<fieldset>
						<table style="width: 100%">

							
							<tr class="control-group"
								th:class="${#fields.hasErrors('name')} ? 'control-group error' : 'control-group'">
								<td class="inputLabel"><label>Name </label></td>
								<td><input type="text" th:field="*{name}"
									th:disabled="${useCase.id !=null}" autofocus="autofocus"
									class="input span9" placeholder="Use case name" required="required" />
									<span class="help-inline error"
									th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Use case name
										is required.</span></td>
							</tr>

							<tr class="control-group">
								<td><label>Select Role</label></td>
								<td class="controls">
								
								<select th:field="*{project}">
										<option th:each="p : ${projects}" th:label="${p.name}" th:value="${p.id}"/>

								</select>
								
								</td>
							</tr>
							

							<tr class="control-group">
								<td class="inputLabel"><label>Description</label></td>
								<td class="controls">
								
								<textarea rows="3" cols="20" th:field="*{description}"
									th:disabled="${useCase.id !=null}" autofocus="autofocus"
									class="input span9" placeholder="Description"></textarea>
								
							
								</td>
							</tr>




						</table>

					</fieldset>
					<div class="form-actions">
						<button type="submit" class="btn btn-success"
							th:disabled="${useCase.id !=null}">Save</button>
						<button type="reset" class="btn btn-info"
							th:disabled="${useCase.id !=null}">Cancel</button>
					</div>
				</form>


			</div>
			<!--/span-->
		</div>
		<!--/row-->

		<hr/>

		<footer>
			<p>&copy; Company 2013</p>
		</footer>

	</div>
	<!--/.fluid-container-->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap-transition.js"></script>
	<script src="js/bootstrap-alert.js"></script>
	<script src="js/bootstrap-modal.js"></script>
	<script src="js/bootstrap-dropdown.js"></script>
	<script src="js/bootstrap-scrollspy.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/bootstrap-tooltip.js"></script>
	<script src="js/bootstrap-popover.js"></script>
	<script src="js/bootstrap-button.js"></script>
	<script src="js/bootstrap-collapse.js"></script>
	<script src="js/bootstrap-carousel.js"></script>
	<script src="js/bootstrap-typeahead.js"></script>

</body>
</html>
